import { Card, Button, Tabs } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';
import { pickBy } from 'lodash';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable, { ActionType } from '@ant-design/pro-table';

import { TableListItem } from './data';
import { isNilAndEmpty, downloadFile } from '@/utils/utils';
import { queryMyRule, queryRule, getShopDetail } from './service';
import style from './index.less';
import storeLogo from '@/assets/img/store_logo.png';
import store01 from '@/assets/store_m01.png';
import store02 from '@/assets/store_m02.png';
import store03 from '@/assets/store_m03.png';
import store04 from '@/assets/store_m04.png';
import store05 from '@/assets/store_m05.png';
import { history } from 'umi';
import { TemplateMarket } from './components/TemplateMarket';
import EditLogo from './components/EditLogo';


const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const logoRef = useRef();
  const [shop, setShop] = useState<any>({});
  const [activeKey, setActiveKey] = useState('1')
  const [selectModule, setSelectModule] = useState('全部')

  const tabList = ['全部', '电商', '生鲜', '餐饮', '美业', '建材', '其他'];

  const columns: any[] = [
    {
      title: '页面名称',
      dataIndex: 'title',
    },
    {
      title: '创建时间',
      dataIndex: 'create_at',
      hideInSearch: true,
      render: (v: number | string) => v !== '-' ? moment((v as number)).format('YYYY-MM-DD') : '-',
    },
    {
      title: '更新时间',
      dataIndex: 'update_at',
      hideInSearch: true,
      render: (v: number | string) => v !== '-' ? moment((v as number)).format('YYYY-MM-DD') : '-',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record, index, action) => (
        <>
          <a
            onClick={() => {
              history.push({ pathname: `/store/furnish/${shop.template_id}/${record.id}` })
            }}
          >
            装修页面
          </a>
        </>
      ),
    },
  ];

  const getShop = () => {
    getShopDetail().then(data => {
      console.log(data, 'data')
      if (data?.code === 0) {
        setShop(data?.data || {});
      }
    });
  }




  useEffect(() => {
    getShop();
  }, [])


  return (
    <PageHeaderWrapper>
      <Card title="店铺管理" className={style['store_manage_wrapper']}>
        <div className={style['store_manage']}>
          <div className={style['store_left']}>
            <div className={style['store_left_wrapper']} onClick={() => logoRef.current?.edit({ logo: shop?.logo })}>
              <img src={shop?.logo} />
              <span>修改logo</span>
            </div>
            <div className={style['store_text']}>
              <div className={style['store_title']}>{shop?.name}</div>
              <div className={style['store_desc']}>当前尚未授权小程序，只有授权后，才能发布小程序仅需1分钟即可创建试用小程序，体验满意后再转正。</div>
              <div className={style['store_opt']}>
                <Button type='primary'>升级续费</Button>
                <Button type='primary' ghost onClick={() => { downloadFile('http://xmmi.oss-cn-beijing.aliyuncs.com/public/736e1270-20d6-47b3-bc09-8aa049e07a28.png') }}>下载二维码</Button>
                <Button type='primary' ghost onClick={() => history.push({ pathname: '/' })}>查看数据</Button>
                <Button type='primary' ghost>发布小程序</Button>
                <Button danger>停用</Button>
              </div>
            </div>
          </div>
          <div className={style['store_right']}>
            <ul className={style['store_right_ul']}>
              <li>
                <div className={style['store_right_wrapper']}>
                  <img src={store01} style={{ width: 43, height: 43 }} />
                </div>
                <div className={style['store_title_text']}>预览</div>
              </li>
              <li>
                <div className={style['store_right_wrapper']}>
                  <img src={store02} style={{ width: 24, height: 26 }} />
                </div>
                <div className={style['store_title_text']}>营销管理</div>
              </li>
              <li onClick={() => history.push({ pathname: '/goods/list' })}>
                <div className={style['store_right_wrapper']}>
                  <img src={store03} style={{ width: 28, height: 26 }} />
                </div>
                <div className={style['store_title_text']}>商品管理</div>
              </li>
              <li>
                <div className={style['store_right_wrapper']}>
                  <img src={store04} style={{ width: 21, height: 26 }} />
                </div>
                <div className={style['store_title_text']}>店铺装修</div>
              </li>
              <li>
                <div className={style['store_right_wrapper']}>
                  <img src={store05} style={{ width: 26, height: 26 }} />
                </div>
                <div className={style['store_title_text']}>更换模板</div>
              </li>
            </ul>
          </div>
        </div>
      </Card>
      <div className={style['tab_content']}>
        <Tabs defaultActiveKey="1" activeKey={activeKey} onChange={(val) => setActiveKey(val)}>
          {/* <Tabs.TabPane tab="店铺小程序页面" key="0">
            <ProTable<TableListItem>
              headerTitle=""
              actionRef={actionRef}
              rowKey="id"
              params={{}}
              toolBarRender={false}
              search={false}
              request={async (params) => {
                const ans = {
                  ...params,
                  page: params?.current,
                };
                delete ans.current;
                const filterAns = pickBy(ans, isNilAndEmpty);
                const { data } = await queryMyRule(filterAns);
                data.data = data.list;
                return data;
              }}
              columns={columns}
              rowSelection={{}}
            />
          </Tabs.TabPane> */}
          <Tabs.TabPane tab="模版小程序页面" key="1">
            <ProTable<TableListItem>
              headerTitle=""
              actionRef={actionRef}
              rowKey="id"
              params={{}}
              toolBarRender={false}
              search={false}
              request={async (params) => {
                const ans = {
                  ...params,
                  page: params?.current,
                  template_id: shop.template_id || 1,
                };
                delete ans.current;
                const filterAns = pickBy(ans, isNilAndEmpty);
                const { data } = await queryRule(filterAns);
                data.data = data.list;
                return data;
              }}
              columns={columns}
              rowSelection={{}}
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab="模板市场" key="2">
            <div className={style['module_category']}>
              {
                tabList.map(it => {
                  return (
                    <Button onClick={() => setSelectModule(it)} type={selectModule === it ? 'primary' : 'text'} ghost={selectModule === it}>{it}</Button>
                  )
                })
              }
            </div>
            <TemplateMarket
            />
          </Tabs.TabPane>
        </Tabs>
      </div>
      <EditLogo ref={logoRef} callback={getShop} />
    </PageHeaderWrapper>
  );
};

export default TableList;
